1.对比

如果想要让块级元素一行排列，可以设置 float，也可以设置 inline-block。两者的效果比较相似，但也有区别：

**是否脱离文档流（Document flow）: **
浮动元素会脱离文档流，并使得周围元素环绕这个元素。而 inline-block 元素仍在文档流内。因此设置 inline-block 不需要清除浮动。当然，周围元素不会环绕这个元素，你也不可能通过清除 inline-block 就让一个元素跑到下面去。

水平位置（Horizontal position）：
很明显你不能通过给父元素设置 text-align:center 让浮动元素居中。事实上定位类属性设置到父元素上，均不会影响父元素内浮动的元素。但是父元素内元素如果设置了 display：inline-block，则对父元素设置一些定位属性会影响到子元素。（这还是因为浮动元素脱离文档流的关系）。

垂直对齐（Vertical alignment）：
在两个 div 的高度不同时，两种方式的对齐效果也不相同：

  • 图一：display:inlne-block 属性修饰的元素没有脱离文档流，当然会与在正常的文档流中的元素一样采取的底端对齐方式。

  • 图二： float 属性修饰的元素在一定程度上脱离了普通文档流的限制，只用考虑向某个方向浮动，所以会产生如图的效果。

区别来了！！！如果是使用 display:inlne-block，则我们可以通过 vertical-align 来控制两个元素的对齐方式。比如说，我们可以为两个 div 分别添加一个属性：vertical-align:middle

<div class="myContainer">
     <div class="div1" style="display: inline-block;vertical-align: middle">
     </div>
     <div class="div2" style="display: inline-block;vertical-align: middle">
     </div>
</div>

这可以让 div1 出现在 div2 的居中位置。假如使用的是 float，那么是做不到这个效果的。

空隙（Whitespace）：
inline-block 包含 html 空白节点。如果 html 中一系列元素的每个元素之间都换行了，当你对这些元素设置 inline-block 时，这些元素之间就会出现空隙。而浮动元素会忽略空白节点，互相紧贴。

2.如何消除 inline-block 带来的空隙

那么如何消除 inline-block 带来的空隙呢？有如下几种方法。

方法一

空隙其实是元素标签之间的空格导致的，所以把空格去掉后空隙自然就会消失了。来看以下几种写法：

  • 写法一（不建议使用）：
<div class="demo">
    <span>我是一个span</span><span>我是一个span</span><span>我是一个span</span><span>我是一个span</span>
</div>
  • 写法二：
<div class="demo">
    <span>我是一个span
    </span><span>我是一个span
    </span><span>我是一个span
    </span><span>我是一个span</span>
</div>
  • 写法三：
<div class="demo">
    <span>我是一个span</span><!--
    --><span>我是一个span</span><!--
    --><span>我是一个span</span><!--
    --><span>我是一个span</span>
</div>

方法二

取消 span 的闭合标签，这样空隙就没有了。为了兼容 IE6/IE7，最后一个标签需要闭合。

<div class="demo">
        <span>我是一个span
        <span>我是一个span
        <span>我是一个span
        <span>我是一个span</span>
</div>
<style>
.demo span{
     background:#ddd;
     display: inline-block;
}    
</style>

方法三

不管是思路一还是思路二，都只适用于写静态页面的时候，一旦 HTML 是后台生成，就不管用了。这时还有一个办法：在父容器上使用 font-size:0。

<div class="demo">
        <span>我是一个span</span>
        <span>我是一个span</span>
        <span>我是一个span</span>
        <span>我是一个span</span>
</div>
<style>
.demo {font-size: 0;}
.demo span{
        background:#ddd;
        display: inline-block;
        font-size: 14px; /*要设置相应的字号*/
}
</style>

原理：
换行和回车会给各个 span 之间带来空格，而空格会被当成字符处理，因此通过给父元素设置字体大小为 0，则空格字符大小也为 0，相当于消除了其大小。需要注意的是，一定要额外设置 span 中的字体大小，否则会继承父元素的 0 大小字体。

方法四

上面的思路其实已经很完美，但可惜不兼容 Safari，以下给出终极方案,即 font-size:0 配合 letter-space:-N px。

.finally-solve {
    letter-spacing: -4px;/*根据不同字体字号或许需要做一定的调整*/
    word-spacing: -4px;
    font-size: 0;
}
.finally-solve li {
    font-size: 16px;
    letter-spacing: normal;
    word-spacing: normal;
    display:inline-block;
    *display: inline;
    zoom:1;
}

3.总结

什么时候使用 inline-block，什么时候使用 float，这取决于你的设计稿跟解决方法。通常来说，当你需要控制元素的垂直对齐跟水平排列时，使用 inline-block；当你需要让元素环绕某一个元素时，或者需要支持旧版本 IE，或者不想处理 inline-block 带来的空隙问题时，使用 float。